<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人博客列表页</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/blog_list.css">
        <!-- 引入jQuery -->
   
    <!-- 引入 editor.md 的依赖 -->
   <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
   <script src="js/jquery.min.js"></script>
   <script src="editor.md/lib/marked.min.js"></script>
   <script src="editor.md/lib/prettify.min.js"></script>
   <script src="editor.md/editormd.js"></script>
   <style>
    .blog .blockTemp {
        width: 200px;
        height: 40px;
        display:inline-block;
    }
    .blog .block1 {
        /* float: left; */
        display:inline-block;

        width: 120px;
        height: 40px;
        line-height: 40px;
        color: black;
        text-align: center;
        text-decoration: none;
        margin: 10px auto 0 auto;
        border: 2px solid black;
        
       
        /* 给颜色加上过渡效果 */
        transition: all 0.3s;
    }

    /* 查看详情按钮的鼠标 hover 效果 */
    .blog .block1:hover {
        background-color: #000;
        color: #fff;
    }

    .blog .block2 {
        display:inline-block;
      
        width: 120px;
        height: 40px;
        line-height: 40px;
        color: black;
        text-align: center;
        text-decoration: none;
        margin: 10px auto 0 auto;
        border: 2px solid black;
        
        
        /* 给颜色加上过渡效果 */
        transition: all 0.3s;
    }

    /* 查看详情按钮的鼠标 hover 效果 */
    .blog .block2:hover {
        background-color: #000;
        color: #fff;
    }
    .blog .block3 {
        /* float: right; */
        display:inline-block;
      
        width: 120px;
        height: 40px;
        line-height: 40px;
        color: black;
        text-align: center;
        text-decoration: none;
        margin: 10px auto 0 auto;
        border: 2px solid black;
        
       
        /* 给颜色加上过渡效果 */
        transition: all 0.3s;
    }

    /* 查看详情按钮的鼠标 hover 效果 */
    .blog .block3:hover {
        background-color: #000;
        color: #fff;
    }
   </style>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/logo.jpg" alt="">
        <span class="title">博客系统(SSM版本)</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list.html">首页</a>
        <a href="blog_edit.html">写博客</a>
        <!-- <a href="/user/logout">退出登录</a> -->
        <a href="javascript:logout()" class="logout">退出登录</a>
        <!-- <a href="#">注销</a> -->
    </div>
    <!-- 版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="container-left">
            <div class="card">
                <img src="img/person.jpg" class="avtar" alt="">
                <h3>用户名</h3>
                <a href="https://blog.csdn.net/weixin_61061381?type=blog">CSDN 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>95</span>
                    <span>7</span>
                </div>
            </div>
        </div>
       
        <!-- 右侧内容详情 -->
        <div class="container-right" id="artlistDiv">
            <!-- 每一篇博客包含标题, 摘要, 时间 -->
            <!-- <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2021-06-02</div>
                <div class="desc" id = 'desc'>
                    从今天起, 我要认真敲代码. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum distinctio ullam eum ut
                    veroab laborum numquam tenetur est in dolorum a sint, assumenda adipisci similique quaerat vel.
                    Facere,
                    et.
                </div>
                <a href="/blog_content.html?id=1" class="detail">查看全文 &gt;&gt;</a>
            </div> -->

        </div>

    </div>

 <script>
 // 通过该函数，从后端获取到当前登录的用户是谁，并把它显示在博客列表页上
      //var uid=1;  // 当前用户的id
      function getUser() {
       jQuery.ajax({
         type: 'get',
         url: '/user/get_user',
         success: function(result) {
           // 替换条原来的用户信息
           var userDiv = document.querySelector('.card h3');
           // 引入css，因为我们css就是按原来的类选择器来设置样式的
            // 但其实这一步也没什么必要，因为我们只是获取到原来的作者标签，并不是新建的标签，在获取到了后该标签所对应的className本来就是原来的名字，不用担心原来的css样式失效
           userDiv.className = '.card h3';           
           userDiv.innerHTML = result.data.username;
           //uid = result.data.id;
         },
         error: function() {
            // 强行跳转到登录页面.
            //alert("当前用户未登录，即将跳转到登录页面")
            location.assign('/login.html');
         }
       });
      }
      getUser();

      var descLength = 80; // 简介最大长度
    // 字符串截取，将文章正文截取成简介
    function mySubstr(content){
        if(content.length>descLength){
            return content.substr(0,descLength);
        }
        return content;
    }

      function getBlogList() {
          jQuery.ajax({
              type: 'get',
              url: '/article/get_mylist'+location.search,  // servlet path, 在页面加载的过程中就会调用主机ip + contentPath + 这个servlet path(就@WebServlet后的地址)

              success: function(result) {

                  var rightDiv = document.querySelector('.container-right');
                  
                  for (var blog of result.data) {
                     function create(name){
                         return document.createElement(name)
                     }
                      // 新建博客结点
                      var blogDiv = create("div")
                      blogDiv.className = 'blog'; // 引入CSS属性
                      // 创建博客标题
                      var titleDiv = document.createElement('div');
                      titleDiv.className = 'title';
                      titleDiv.innerHTML = blog.title;
                      blogDiv.appendChild(titleDiv); // 把博客标题挂到博客结点上
                      // 创建日期
                      var dateDiv = document.createElement('div');
                      dateDiv.className = 'date';
                      dateDiv.innerHTML = blog.createtime;
                      blogDiv.appendChild(dateDiv);  // 把博客日期挂到博客结点上
                      
                      // 创建摘要
                      var descDiv = document.createElement('div');
                      descDiv.className = 'desc';
                      descDiv.innerHTML =mySubstr(blog.content);

                      blogDiv.appendChild(descDiv);  // 把博客摘要挂到博客结点上
                      
                      var temp = document.createElement('div');
                      temp.className = 'blockTemp';
                    
                      blogDiv.appendChild(temp);

                      // 创建查看全文按钮
                      var a1 = document.createElement('a');
                      a1.className = 'block1';
                      a1.innerHTML = '查看全文';
                      // a标签跳转的过程就相当于是发了一个get请求，这里我们在跳转的url地址后加上要传递的参数，即QueryString,等下我们在博客详情页也会用到这个参数
                      a1.href = 'blog_content.html?id=' + blog.id;
                      blogDiv.appendChild(a1);

                      var a2 = document.createElement('a');
                      a2.className = 'block2';
                      a2.innerHTML = '修改';
                      a2.href = 'blog_update.html?id=' + blog.id;
                      blogDiv.appendChild(a2);
                    
                      var a3 = document.createElement('a');
                      a3.className = 'block3';
                      a3.innerHTML = '删除';
                      a3.href = 'javascript:mydel(' + blog.id + ')';
                      blogDiv.appendChild(a3);
                      // 把 blogDiv 加入外层元素
                      rightDiv.appendChild(blogDiv);  // 把构建好的一篇博客挂到博客列表上
                  }
              },
              error: function(err) {
                if (err.status == 401) {
                    alert("当前用户未登录，你即将跳转到登录页面");
                    location.href = "login.html";
                }
                else {
                    alert("获取博客列表失败！");
                }
              
              }
          });
      }
    getBlogList(); // 不要忘了调用函数
    function logout() {
        if (confirm("确认要退出登录？")) {
            jQuery.ajax({
                url:"/user/logout",
                type:"get",
                success: function(result) {
                    alert("恭喜,退出成功,点击进行下一步操作")
                    location.href = "login.html";
                },
                error: function() {
                    // 说明当前退出的状态不正确，可能未登录，强行跳转到登录页面.
                    alert("抱歉，当前状态异常，请点击确认！")
                    location.assign('/login.html');
                }
            });
        }
    }
    function mydel(id) {
        if (confirm("确认要删除该篇博客？")) {
            jQuery.ajax({
                url:"/article/del?id=" + id,
                type:"get",
                success: function(result) {
                    if (result.state == 200 && result.data > 0) {
                        alert("恭喜！删除成功！");
                        location.href = "/blog_list.html";
                    }
                    else {
                        alert("对数据库进行删除操作失败");
                    }
                },
                error: function(error) {
                    if (error.status == 401) {
                        alert("当前用户未登录，你即将跳转到登录页面！");
                        location.href = "login.html";
                    }   
                    alert("删除失败！请稍后再试！");
                 }
            });
        }
      
    }   
        
 </script>
</body>
 

</html>